<template>
    <view class="logon-page">
        <uni-forms ref="loginForm" :rules="loginRules" :modelValue="loginFormData">
            <uni-forms-item name="userPhone">
                <uni-easyinput v-model="loginFormData.userPhone" type="number" placeholder="手机号" placeholderStyle="color: #DDD"/>
            </uni-forms-item>
            <uni-forms-item name="userPassword">
                <uni-easyinput v-model="loginFormData.userPassword" type="password" placeholder="密码" placeholderStyle="color: #DDD"/>
            </uni-forms-item>
        </uni-forms>
        <button type="primary" @click="login" style="border-radius: 25px; background-color: #1989FA;">登录</button>
    </view>
</template>

<script>
import UniEasyinput from "../../uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue";
import UniForms from "../../uni_modules/uni-forms/components/uni-forms/uni-forms.vue";
import UniFormsItem from "../../uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue";

import {loading, toast, hide} from "../../js/utils/showTip";
import {passwordLogin} from "../../js/api/user";

export default {
    name: "login",
    components: {UniFormsItem, UniForms, UniEasyinput},
    data() {
        return {
            loginFormData: {
                userPhone: '',
                userPassword: ''
            },
            loginRules: {
                userPhone: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '手机号不能为空'
                        },
                        {
                            validateFunction: function (rule, value, data, callback) {
                                var phoneRegex = /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/;
                                if (!phoneRegex.test(value)) {
                                    callback('请输入正确的手机号')
                                }
                                return true
                            }
                        }
                    ]
                },
                userPassword: {
                    rules: [
                        {
                            required: true,
                            errorMessage: '密码不能为空'
                        }
                    ]
                }
            }
        }
    },
    methods: {
        login() {
            this.$refs.loginForm.validate().then(res=>{
                loading("登陆中...", true)
                passwordLogin(res).then(response => {
                    if (response.code === 200) {
                        toast("登录成功!", "success", false, 500);
                        uni.setStorage({
                            key: 'user',
                            data: response.data
                        });
                        if (uni.getStorageSync('headImg') === null) {
                            uni.setStorageSync('headImg', response.data.userHeadImg)
                        }
                        uni.reLaunch({
                            url: '/pages/index/index'
                        })
                    } else {
                        this.test = this.test + response.message
                        toast(response.message, "error", false, 500)
                    }
                })
            }).catch(err =>{
                this.loginFormData.userPassword = '';
            })
        },
    },
    onReady() {
        // 设置自定义表单校验规则，必须在节点渲染完毕后执行
        this.$refs.loginForm.setRules(this.loginRules)
    },
}
</script>

<style scoped>
.logon-page {
    padding: 15px;
    background-color: #fff;
    margin-top: 40%;
}
</style>